<template>
  <ElAvatar v-if="avatarUrl" :src="avatarUrl" class="avatar" :size="120"></ElAvatar>
  <ElAvatar v-else-if="username" class="avatar" :size="120">
    {{ username }}
  </ElAvatar>
  <ElAvatar v-else class="avatar" :size="120" :icon="UserFilled">
  </ElAvatar>
</template>

<script setup lang="ts">

import { UserFilled } from '@element-plus/icons-vue'
//定义一个interface,可以为null|undefined|string
interface AvatarProps {
  avatarUrl?: string | null;
  username?: string | null;
}

//优先展示图片头像
//其次展示用户名首字母头像
//最后展示默认头像
const props = defineProps<AvatarProps>()
</script>

<style scoped></style>
